<template>
  <div class="login-box">
    <div class="center-login-box">
      <div class="title">
        校园牛逼二手网
      </div>
      <div class="username">
        <el-input
          v-model="loginParams.username"
          placeholder="请输入账号"
          :prefix-icon="User"
          clearable
        />
      </div>
      <div class="password">
        <el-input
          v-model="loginParams.password"
          show-password
          placeholder="请输入密码"
          :prefix-icon="Lock"
          clearable
        />
      </div>
      <div class="captcha_box">
        <div class="input">
          <el-input
            v-model="loginParams.captcha"
            placeholder="请输入验证码"
            :prefix-icon="Picture"
            clearable
          />
        </div>
        <img class="captcha" :src="captcha.imageBase64" @click="getCaptcha" />
      </div>
      <div class="button">
        <el-button
          class="submit"
          type="primary"
          @click="login"
        >登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {Result} from "@/types/Result";
import {Lock, Picture, User} from "@element-plus/icons-vue";
import {useStore} from "vuex";
import {getCaptchaInfo, getUserInfo, loginAuth} from "@/service/LoginController";
import {useRoute, useRouter} from "vue-router";
import db, {MENU_KEY} from "@/utils/db";

const store = useStore();
const route = useRoute();
const router = useRouter();

const captcha = ref<{ imageBase64: string; uuid: string }>({
  imageBase64: "",
  uuid: "",
});
const loginParams = ref<{
  username: string;
  password: string;
  captcha: string;
}>({
  username: "",
  password: "",
  captcha: "",
});
const redirectUrl = ref<string>();

onMounted(async () => {
  // 尝试获取用户信息
  await initUser();
  const params = route.query;
  redirectUrl.value = params.redirectUrl as string;
  getCaptcha();
});

const initUser = async () => {
  const res: any = await getUserInfo();
  if (res.code === "000000") {
    store.commit("setUser", res.data);
    store.commit("setPermissionList", res.data.permissionList || []);
    store.commit("setRoleList", res.data.roleList || []);
    db.saveObj(MENU_KEY, res.data.menuList || []);
    router.push("/back/welcome");
  }
}

const getCaptcha = async () => {
  const res: Result<any> = await getCaptchaInfo();
  if (res.code === "000000") {
    captcha.value = res.data;
  } else {
    ElMessage.error(res.message);
  }
};

const login = async () => {
  const { code, data, message }: Result<any> = await loginAuth({
    username: loginParams.value.username,
    password: loginParams.value.password,
    uuid: captcha.value.uuid,
    captcha: loginParams.value.captcha,
  });
  if (code === "000000") {
    ElMessage.success("登录成功啦~");
    store.commit("setToken", data.token);
    await initUser();
    // store.commit("setUser", data);
    // if (redirectUrl.value) {
    //   // 解码 URL
    //   // 登录成功后跳转回原页面
    //   window.location.href = decodeURIComponent(redirectUrl.value);
    // } else {
    //   router.push(`/welcome`)
    // }
    router.push(`/back/welcome`)
  } else {
    getCaptcha();
  }
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>
